<template>

  <div class="companys w-1400">
    <div v-for="(item, index) in categeroList" :key="index" class="list-item" :id="'category-' + item.id">
      <div class="head-box">
        <div><span class="index">{{ (index + 1) + 'F' }}</span> <span class="title">{{ item.title }}</span></div>
        <div style="cursor: pointer;" @click="openGood(item)"><span class="more-tips">显示更多</span> <img src="@/static/engineering5188/homPage/rightArrow.png"
            class="right-arrow" /></div>
      </div>
      <div class="sub-list">
        <div v-for="(subItem, subIndex) in item.companyList" :key="subIndex" class="sub-item" @click="openDetail(subItem)">
          <img :src="subItem.image_url"  />
          <span class="name">{{ subItem.company_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "companyDisplay",
  components: {

  },
  props: [],
  data() {
    return {
      companysList: [],
      categeroList:[]
    };
  },
  computed: {

  },
  watch: {},

  created() {
    this.initData()
    this.getProductCatData();
  },

  methods: {
    openGood(item){
      this.$router.push({
        path: '/goodsAndServices',
        query: {
          cat_id: item.id,
        }
      })
    },
    openDetail(item){
      this.$router.push({
        path: '/companyInfo/product',
        query: {
          shop_id: item.shop_id,
          detail: true,
          id: item.id,
        }
      })
    },
    getProductCatData() {
      this.$httpApi("/api/getProductCat", {
        parent_id: 0
      },
        "get"
      )
        .then((res) => {
          
          res.data.forEach(element => {
            // 根据element的id调用接口获取数据
            element.companyList = [];
            this.$httpApi("/api/getProductList", {
              cat_id: element.id
            }, "get")
              .then((res) => {
                // 将获取到的数据赋值给element的companyList字段
                element.companyList = res.data.list;
              });
          });
          this.categeroList = res.data;
        });
    },

    initData() {
      let egeGenCntUnitNames = ['中国建筑-中国中铁股份有限公司', '业之锋装饰有限公司',
        '安徽富煌钢构股份有限公司', '思科市政桥梁有限公司', '中国建筑-中国中铁股份有限公司',
        '中国建筑-中国中铁股份有限公司', '业之锋装饰有限公司',
        '安徽富煌钢构股份有限公司', '思科市政桥梁有限公司', '中国建筑-中国中铁股份有限公司']

      this.companysList = [
        this.initCompany('工程总承包单位', 'egeGenCntUnit', egeGenCntUnitNames),
        this.initCompany('劳务分包单位', 'egeGenCntUnit', this.getDemoNames('劳务分包单位名称')),
        this.initCompany('专业分包单位', 'egeGenCntUnit', this.getDemoNames('专业分包单位名称')),
        this.initCompany('基建材料', 'egeGenCntUnit', this.getDemoNames('基建材料供应商名称')),
        this.initCompany('装饰材料', 'egeGenCntUnit', this.getDemoNames('装饰材料商企业名称')),
        this.initCompany('机电材料', 'egeGenCntUnit', this.getDemoNames('机电材料供应商名称')),
        this.initCompany('市政桥梁水利材料', 'egeGenCntUnit', this.getDemoNames('市政桥梁水利材料企业名称')),
        this.initCompany('苗木花卉', 'egeGenCntUnit', this.getDemoNames('苗木花卉企业名称')),
        this.initCompany('石材', 'egeGenCntUnit', this.getDemoNames('石材企业名称')),
        this.initCompany('机械设备周转材供应租赁', 'egeGenCntUnit', this.getDemoNames('机械设备周转企业名称')),
      ]
    },
    initCompany(title, imagePath, companyNamArr) {
      let subCompanyList = []
      for (let i = 0; i < 10; i++) {
        subCompanyList.push({
          companyIcon: require(`@/static/engineering5188/homPage/${imagePath}/icon_${(i + 1)}.png`),
          companyName: companyNamArr[i]
        })
      }
      return {
        title,
        companyList: subCompanyList
      }
    },
    getDemoNames(name) {
      let tempList = []
      for (let i = 0; i < 10; i++) {
        tempList.push(name)
      }
      return tempList
    }
  },
};
</script>
<style scoped lang="less">
.companys {
  height: auto;
  display: flex;
  max-width: @engineerwidth;
  flex-direction: column;

  .list-item {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;

    .head-box {
      display: flex;
      justify-content: space-between;

      .index {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 22px;
        color: #31A41B;
        text-align: left;
      }

      .title {
        margin-left: 5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #000000;
        text-align: left;
      }

      .more-tips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #31A41B;
        margin-right: 3px;
        text-align: right;
        vertical-align: middle;
      }

      .right-arrow {
        width: 12px;
        height: 12px;
        vertical-align: middle;
      }
    }

    .sub-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .sub-item {
        margin-top: 20px;
        margin-right: 20px;
        display: flex;
        width: 256px;
        flex-direction: column;
        border: 1px solid #F2F2F2;
        cursor: pointer;

        img {
          width: 256px;
          height: 158px;
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #000000;
          text-align: center;
          margin-top: 16px;
          margin-bottom: 16px;
        }

        &:nth-child(5n) {
          margin-right: 0px !important;
        }
      }
    }
  }
}
</style>
